<template>
	<view class=" pt-45 pl-30 pr-30">
		<view class="password-head pl-30 pr-30">
			<u-field v-model="from.phone" label="旧手机号" disabled maxlength="11" type="number" input-align="right" placeholder="请输入手机号">
			</u-field>
			<view class="">
				<u-field v-model="from.phone_captcha" label-width="0" maxlength="6" type="number" placeholder="请填写验证码">
					<u-button size="mini" slot="right" hover-class="none" class='code-btn' @click="getCode">{{codeText}}</u-button>
				</u-field>
				<u-verification-code ref="uCode" @change="codeChange"></u-verification-code>
			</view>
			<u-field v-model="from.mobile" label="新手机号" maxlength="11" type="number" input-align="right" placeholder="请输入手机号">
			</u-field>
			<view class="">
				<u-field v-model="from.mobile_captcha" label-width="0" :border-bottom="false" maxlength="6" type="number" placeholder="请填写验证码">
					<u-button size="mini" slot="right" hover-class="none" class='code-btn' @click="getCode">{{codeText}}</u-button>
				</u-field>
				<u-verification-code ref="uCode" @change="codeChanges"></u-verification-code>
			</view>
		</view>
		<view class="mt-44">
			<u-button class="password-btn size-30 white" hover-class="none" @click="submit">提交</u-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				from: {
					mobile: '',
					phone:'',
					phone_captcha: '',
					mobile_captcha:''
				},
				codeText:'获取验证码'
			};
		},
		methods:{
			submit () {
				if (!this.from.phone.match(/^(0|86|17951)?1[3456789]\d{9}$/)) return uni.showToast({title:'请输入正确的旧手机号',icon:'none'})
				if (!this.from.phone_captcha) return uni.showToast({
					title:'请输入旧手机号验证码',
					icon:'none'
				})
				
				if (!this.from.mobile.match(/^(0|86|17951)?1[3456789]\d{9}$/)) return uni.showToast({title:'请输入正确的新手机号',icon:'none'})
				if (!this.from.mobile_captcha) return uni.showToast({
					title:'请输入新手机号验证码',
					icon:'none'
				})
				this.$http('api/newapi/userMobile',this.from).then(res=>{
					uni.showToast({
						title:'修改成功',
						icon:'none'
					})
					setTimeout(()=>{
						uni.navigateBack()
					},800)
				})
			},
			codeChange (e) {
				console.log(e);
			},
			codeChanges (e) {
				console.log(e);
			},
			getUserInfo () {
				this.$http('api/user/userInfo').then(res => {
				  this.from.phone = res.phone
				})
			},
		},
		onLoad() {
			this.getUserInfo()
		}
	}
</script>
<style>
	page {
		background: #f5f5f5;
	}
</style>
<style lang="scss">
	.password-head {
		background: #fff;
		border-radius: 16rpx;
	}

	.password-head-li {
		height: 100rpx;
		border-bottom: 1px solid #EBEBEB;

		&:last-child {
			border-bottom: none;
		}

		input {
			text-align: right;
			color: #3c3c3c;
			font-size: 30rpx;
		}

		&:nth-child(2) {
			input {
				text-align: left;
			}
		}

		.code {
			width: 190rpx;
			height: 60rpx;
			color: #dedede90;
			font-size: 28rpx;
			line-height: 60rpx;
			text-align: center;
			background: #303143;
			border-radius: 30rpx;
		}
	}

	.password-btn {
		color: #FFFFFF;
		height: 88rpx !important;
		background: linear-gradient(90deg, #EEA634, #DE2D32);
		border-radius: 44rpx;

		&::after {
			border: none;
		}
	}

	/deep/ .u-field {
		color: #282828;
		padding: 30rpx 0 !important;
	}
	.code-btn {
		width: 190rpx;
		height: 60rpx;
		color: #FFFFFF;
		font-size: 28rpx;
		background: #3c3c3c95;
		border-radius: 30rpx;
		&::after {
			border: none;
		}
	}
</style>
